<template>
  <view class="container">
    <Header title="服务表单" v-model:model-value="headerHeader">
      <view class="top-btn">
        <TButton
          class="gutter-btn"
          text="创建表单"
          type="primary"
          @click.stop="navigateTo({ name: 'createServiceForm', options: {} })"
        />
        <text class="label">管理的模板</text>
      </view>
    </Header>
    <Paglist v-model="dataList" :is-init-api="true" @register="register" :scroll-top-bottom="260">
      <view class="list-container">
        <template v-for="(item, index) in dataList" :key="index">
          <FormTemplateItem
            :avatar-image="item.avatar"
            :name="item.userName"
            :title="item.title"
            :date-time-str="item.pushTime"
            :num="item.submitNumber"
            :sta="item.status"
            @click="() => handleClick(item)"
            @click-right="() => handleRight(item)"
            @on-share="emits('reportedData', item)"
          ></FormTemplateItem>
        </template>
      </view>
    </Paglist>

    <OprationDrawer ref="oprationDrawerRef" @ok="handleOprationDrawerOk"></OprationDrawer>
  </view>
</template>
<script setup lang="ts">
  import Header from '@/components/Header/index.vue';
  import { navigateTo } from '@/router';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import FormTemplateItem from './FormTemplateItem.vue';
  import { formTemplateList } from '@/api/serviceForm/index';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import type { IFormTemplate } from '@/api/serviceForm/types';
  import { provide, ref } from 'vue';
  import OprationDrawer from './OprationDrawer.vue';
  import { onShow } from '@dcloudio/uni-app';

  const emits = defineEmits(['reportedData']);

  const headerHeader = ref(0);
  const dataList = ref<IFormTemplate[]>([]);
  const [register, { refresh }] = useConList();
  provide('api', formTemplateList);

  const oprationDrawerRef = ref<InstanceType<typeof OprationDrawer>>();
  const handleClick = (item: IFormTemplate) => {
    oprationDrawerRef.value?.open(item);
  };

  onShow(() => {
    dataList.value = [];
    refresh();
  });

  function handleOprationDrawerOk() {
    refresh();
  }

  const handleRight = (item: IFormTemplate) => {
    navigateTo({
      name: 'formDatas',
      options: {
        id: item.id,
        currentIndex: 1,
      },
    });
  };
</script>
<style lang="scss" scoped>
  .container {
    .top-btn {
      background-color: white;
      padding: 32rpx;
      display: flex;
      flex-direction: column;
      gap: 56rpx;
      .label {
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }

    .list-container {
      display: flex;
      padding: 32rpx;
      padding-top: 24rpx;
      flex-direction: column;
      gap: 24rpx;
    }
  }
</style>
